<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>词条详情 - lumina AI</title>
    <script src="../assets/js/tailwindcss.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFE45C',
                        secondary: '#FFE45C',
                        accent: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '8px'
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-in-out',
                        'slide-up': 'slideUp 0.8s ease-out',
                        'bounce-gentle': 'bounceGentle 2s infinite'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(30px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        bounceGentle: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    }
                }
            }
        }
    </script>
    <link href="../assets/css/google-fonts-pacifico-inter.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="../assets/css/lemon-milk.css" rel="stylesheet">
    <link href="../assets/css/google-fonts-montserrat.css" rel="stylesheet">
    <link href="../assets/css/index.css" rel="stylesheet">
</head>
<body class="min-h-screen font-['Inter'] scroll-smooth">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 border-b border-gray-100 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="../index.html" class="flex items-center gap-3">
                    <span class="text-2xl text-black" style="font-family: 'Montserrat', Arial, sans-serif;">lumina AI</span>
                </a>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center gap-8 justify-center flex-1">
                <a href="../index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">主页</a>
                <a href="./index.html" class="text-[#FFE45C] font-medium transition-colors duration-200">AI词条</a>
                <a href="../AiOpen/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI开源</a>
                <a href="../AiHardware/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI硬件</a>
                <a href="../AiPrompts/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">指令库</a>
                <a href="../AiBlog/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">博客</a>
            </nav>
            
            <!-- 工具区域 -->
            <div class="flex items-center gap-4">
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fab fa-weixin"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fas fa-globe"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fas fa-user"></i>
                </button>
                
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden w-10 h-10 flex items-center justify-center text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg transition-all duration-200" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
            <div class="px-4 py-6 space-y-4">
                <a href="../index.html" class="block text-gray-700 hover:text-secondary font-medium py-2">主页</a>
                <a href="./index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">AI词条</a>
                <a href="../AiOpen/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">AI开源</a>
                <a href="../AiHardware/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">AI硬件</a>
                <a href="../AiPrompts/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">指令库</a>
                <a href="../AiBlog/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">博客</a>
            </div>
        </div>
    </header>

    <main class="pt-16">
        <!-- 面包屑导航 -->
        <section class="bg-white border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                <nav class="flex items-center space-x-2 text-sm">
                    <a href="../index.html" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fas fa-home"></i>
                    </a>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                    <a href="./index.html" class="text-gray-500 hover:text-primary transition-colors">AI词条</a>
                    <i class="fas fa-chevron-right text-gray-300"></i>
                    <span id="breadcrumbTitle" class="text-gray-900 font-medium">词条详情</span>
                </nav>
            </div>
        </section>

        <!-- 词条详情内容 -->
        <section class="py-8">
            <div class="w-full max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 min-h-screen">
                <!-- 加载状态 -->
                <div id="loadingState" class="text-center py-12">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
                    <p class="text-gray-600">加载词条详情中...</p>
                </div>

                <!-- 词条详情 -->
                <div id="entryDetail" class="hidden w-full">
                    <!-- 词条头部 -->
                    <div class="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100 mb-4 sm:mb-6 w-full">
                        <div class="flex items-center gap-3 sm:gap-4 mb-3 sm:mb-4">
                            <div id="entryIcon" class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center">
                                <i class="fas fa-microchip text-blue-600 text-xl sm:text-2xl"></i>
                            </div>
                            <div class="flex-1">
                                <h1 id="entryTitle" class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">词条标题</h1>
                            </div>
                        </div>
                        
                        <!-- 词条标签 -->
                        <div id="entryTags" class="flex flex-wrap gap-2 sm:gap-3">
                            <!-- 标签将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <!-- 详细内容 -->
                    <div id="cardContent" class="bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-gray-100 mb-6 sm:mb-8 w-full">
                        <div id="contentLoading" class="text-center py-8">
                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
                            <p class="text-gray-600">加载详细内容中...</p>
                        </div>
                        <div id="contentContainer" class="hidden">
                            <!-- 卡片内容将在这里动态加载 -->
                        </div>
                    </div>

                    <!-- 相关词条 -->
                    <div class="bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-gray-100 w-full">
                        <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-4 sm:mb-6">相关词条</h2>
                        <div id="relatedEntries" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                            <!-- 相关词条将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 错误状态 -->
                <div id="errorState" class="hidden text-center py-12">
                    <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">加载失败</h3>
                    <p class="text-gray-600 mb-4">无法加载词条详情，请检查网络连接</p>
                    <button onclick="window.history.back()" class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                        返回上一页
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 简洁页脚 -->
    <footer class="bg-gray-50 text-gray-500 py-8 border-t border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="mb-2 text-base font-semibold text-gray-700 site-description"></div>
            <div class="text-xs text-gray-400 icp-number"></div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        let currentEntry = null;
        let allEntries = [];

        // 颜色映射
        const colorMap = {
            'blue': 'from-blue-100 to-blue-200 text-blue-600',
            'green': 'from-green-100 to-green-200 text-green-600',
            'purple': 'from-purple-100 to-purple-200 text-purple-600',
            'orange': 'from-orange-100 to-orange-200 text-orange-600',
            'indigo': 'from-indigo-100 to-indigo-200 text-indigo-600',
            'teal': 'from-teal-100 to-teal-200 text-teal-600',
            'pink': 'from-pink-100 to-pink-200 text-pink-600',
            'red': 'from-red-100 to-red-200 text-red-600',
            'cyan': 'from-cyan-100 to-cyan-200 text-cyan-600',
            'amber': 'from-amber-100 to-amber-200 text-amber-600'
        };

        // 标签颜色映射
        const tagColorMap = {
            'NLP': 'bg-blue-100 text-blue-600',
            'CV': 'bg-purple-100 text-purple-600',
            'RL': 'bg-red-100 text-red-600',
            'LLM': 'bg-orange-100 text-orange-600',
            'ML': 'bg-green-100 text-green-600',
            'AI': 'bg-cyan-100 text-cyan-600',
            '架构': 'bg-green-100 text-green-600',
            '应用': 'bg-purple-100 text-purple-600',
            '算法': 'bg-blue-100 text-blue-600',
            '前沿技术': 'bg-orange-100 text-orange-600',
            '基础概念': 'bg-indigo-100 text-indigo-600',
            '注意力机制': 'bg-teal-100 text-teal-600',
            '图像处理': 'bg-green-100 text-green-600',
            '智能体': 'bg-red-100 text-red-600',
            '文本处理': 'bg-pink-100 text-pink-600',
            '深度学习': 'bg-indigo-100 text-indigo-600',
            '注意力': 'bg-teal-100 text-teal-600',
            '多模态': 'bg-amber-100 text-amber-600',
            '融合': 'bg-cyan-100 text-cyan-600',
            '智能': 'bg-cyan-100 text-cyan-600'
        };

        // 格式化时间
        function formatTime(timeString) {
            const date = new Date(timeString);
            const now = new Date();
            const diff = now - date;
            
            const minutes = Math.floor(diff / 60000);
            const hours = Math.floor(diff / 3600000);
            const days = Math.floor(diff / 86400000);
            
            if (minutes < 60) {
                return `${minutes}分钟前`;
            } else if (hours < 24) {
                return `${hours}小时前`;
            } else {
                return `${days}天前`;
            }
        }

        // 获取URL参数
        function getUrlParameter(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 渲染词条详情
        function renderEntryDetail(entry) {
            // 更新面包屑
            document.getElementById('breadcrumbTitle').textContent = entry.name;
            
            // 更新页面标题
            document.title = `${entry.name} - lumina AI`;
            
            // 更新词条图标
            const iconElement = document.getElementById('entryIcon');
            const colorClass = colorMap[entry.logoColor] || 'from-blue-100 to-blue-200 text-blue-600';
            iconElement.className = `w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br ${colorClass} rounded-xl flex items-center justify-center`;
            iconElement.innerHTML = `<i class="${entry.logo} text-xl sm:text-2xl"></i>`;
            
            // 更新词条标题
            document.getElementById('entryTitle').textContent = entry.name;
            
            // 渲染标签
            const tagsContainer = document.getElementById('entryTags');
            const tagsHTML = entry.tags.map(tag => {
                const tagColor = tagColorMap[tag] || 'bg-gray-100 text-gray-600';
                return `<span class="px-3 py-1 ${tagColor} text-sm rounded-full">${tag}</span>`;
            }).join('');
            tagsContainer.innerHTML = tagsHTML;
            
            // 渲染详细内容（这里可以根据实际需求扩展）
            // 注意：详细内容现在通过 loadCardContent 函数动态加载
            // 所以这里不需要渲染静态内容
        }

        // 渲染相关词条
        function renderRelatedEntries(currentEntry) {
            const container = document.getElementById('relatedEntries');
            
            // 获取同类别或相关标签的词条
            const relatedEntries = allEntries
                .filter(entry => entry.id !== currentEntry.id)
                .filter(entry => 
                    entry.category === currentEntry.category ||
                    entry.tags.some(tag => currentEntry.tags.includes(tag))
                )
                .slice(0, 6);
            
            if (relatedEntries.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-8">
                        <p class="text-gray-500">暂无相关词条</p>
                    </div>
                `;
                return;
            }
            
            const relatedHTML = relatedEntries.map(entry => {
                const colorClass = colorMap[entry.logoColor] || 'from-gray-100 to-gray-200 text-gray-600';
                return `
                    <div class="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors cursor-pointer" 
                         onclick="window.location.href='?id=${entry.id}'">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-8 h-8 bg-gradient-to-br ${colorClass} rounded-lg flex items-center justify-center">
                                <i class="${entry.logo} text-sm"></i>
                            </div>
                            <h3 class="font-bold text-gray-900">${entry.name}</h3>
                        </div>
                        <p class="text-gray-600 text-sm line-clamp-2">${entry.description}</p>
                    </div>
                `;
            }).join('');
            
            container.innerHTML = relatedHTML;
        }

        // 加载词条数据
        async function loadEntryData() {
            try {
                // 获取词条ID
                const entryId = getUrlParameter('id');
                if (!entryId) {
                    throw new Error('未找到词条ID');
                }
                
                // 加载所有词条数据
                const response = await fetch('./Entrys.json');
                const data = await response.json();
                allEntries = data.entries;
                
                // 查找当前词条
                currentEntry = allEntries.find(entry => entry.id === entryId);
                if (!currentEntry) {
                    throw new Error('未找到指定词条');
                }
                
                // 渲染词条详情
                renderEntryDetail(currentEntry);
                renderRelatedEntries(currentEntry);
                
                // 加载卡片内容
                await loadCardContent(currentEntry);
                
                // 隐藏加载状态，显示详情
                document.getElementById('loadingState').classList.add('hidden');
                document.getElementById('entryDetail').classList.remove('hidden');
                
            } catch (error) {
                console.error('加载词条详情失败:', error);
                document.getElementById('loadingState').classList.add('hidden');
                document.getElementById('errorState').classList.remove('hidden');
            }
        }

        // 加载卡片内容
        async function loadCardContent(entry) {
            try {
                const contentLoading = document.getElementById('contentLoading');
                const contentContainer = document.getElementById('contentContainer');
                
                // 显示加载状态
                contentLoading.classList.remove('hidden');
                contentContainer.classList.add('hidden');
                
                // 构建卡片文件路径
                const cardPath = entry.cardPath || `cards/${entry.id}.html`;
                
                // 尝试加载卡片内容
                const response = await fetch(cardPath);
                if (!response.ok) {
                    throw new Error(`无法加载卡片内容: ${response.status}`);
                }
                
                const cardHtml = await response.text();
                
                // 提取卡片内容（排除head和body标签）
                const contentMatch = cardHtml.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
                if (contentMatch) {
                    let content = contentMatch[1];
                    
                    // 移除导航和返回按钮等不需要的元素
                    content = content.replace(/<div[^>]*class="[^"]*mb-6[^"]*"[^>]*>[\s\S]*?<\/div>/gi, '');
                    content = content.replace(/<a[^>]*href="[^"]*index\.html[^"]*"[^>]*>[\s\S]*?<\/a>/gi, '');
                    
                    // 清理多余的样式和脚本
                    content = content.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
                    content = content.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
                    
                    // 设置内容
                    contentContainer.innerHTML = content;
                    
                    // 隐藏加载状态，显示内容
                    contentLoading.classList.add('hidden');
                    contentContainer.classList.remove('hidden');
                } else {
                    throw new Error('卡片内容格式不正确');
                }
                
            } catch (error) {
                console.error('加载卡片内容失败:', error);
                
                // 如果卡片文件不存在，显示默认内容
                const contentContainer = document.getElementById('contentContainer');
                contentContainer.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-file-alt text-gray-400 text-4xl mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">内容开发中</h3>
                        <p class="text-gray-600">该词条的详细内容正在开发中，敬请期待...</p>
                    </div>
                `;
                
                document.getElementById('contentLoading').classList.add('hidden');
                contentContainer.classList.remove('hidden');
            }
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadEntryData();
        });
    </script>
    <script src="../assets/js/common.js"></script>
</body>
</html> 